<template>
	<view class="page-skill-improvement">
		<u-navbar title="技能提升" title-color="#000" :title-bold="true" :border-bottom="false"></u-navbar>
		<image src="/static/atlas/tujiguifan.jpg" mode="" class="atlas_img"></image>
		<u-tabs name="name" :list="tabList" :current="current" @change="change" :bar-width="100" active-color="#000000"
		 :bar-style="{backgroundColor:'#c40200',height:'5rpx',borderRadius: '5rpx',marginBottom:'-2rpx'}"></u-tabs>
		<view class="skill-wrap">
			<block v-for="(item,index) in skillList">
				<leftImgRightText :item="item" @goDetail="goDetail"></leftImgRightText>
				<u-line color="#ebebeb" v-if="skillList.length != (index+1)"></u-line>
			</block>
		</view>
	</view>
</template>

<script>
	import { commonGet } from '@/api/commonapi.js'
	import leftImgRightText from '@/components/common/left-img-right-text.vue'
	export default {
		components:{
			leftImgRightText
		},
		data() {
			return {
				tabList: [{name: '推荐',colid: ""}],
				current: 0,
				sysMemID:"",
				skillList: []
			}
		},
		onLoad() {
			if(this.$store.state.userIn){
				this.sysMemID = JSON.parse(this.$store.state.userIn).id
			}
			this.getData()
		},
		methods: {
			change(index) {
				this.current = index;
				this.getDataList(this.tabList[index].id,index)
			},
			getData(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"nSkill_list_proc",
					para:JSON.stringify({})
				}
				commonGet(query,({Data})=>{
					_this.tabList = [..._this.tabList,...Data.Datas1]
					_this.skillList = Data.Datas2
				})
			},
			getDataList(colid,index){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"nSkill_list_proc",
					para:JSON.stringify({
						sysMemID:_this.sysMemID,
						colid:colid
					})
				}
				commonGet(query,({Data})=>{
					if(index != 0){
						_this.skillList = Data.Data
					}else{
						_this.skillList = Data.Datas2
					}
				})
			},
			goDetail(item){
				this.$u.route('/pages/HomeLnner/skill-improvement-detail/skill-improvement-detail', {
					id: item.id
				});
			}
		}
	}
</script>

<style lang="scss">
.page-skill-improvement{
	.atlas_img {
		width: 100vw;
		height: 320rpx;
	}
	.skill-wrap{
		padding: 0 30rpx 30rpx 30rpx;
	}
}
</style>
